<template>
	<view>
		<view class="conent_box">
			<view class="conent">
				<u-sticky>
					<view class="">
						<u-subsection :list="typeList" :current="current" @change="sectionChange"
							bgColor="#F2F6FC"></u-subsection>
					</view>
				</u-sticky>
				<view class="conent_cont">
					<view class="list_box" v-if="data !== undefined && data!== null && data.length>0">
						<view class="list" v-if="2<1" v-for="(item,index) in data" :key="index"
							@click="info(item.product_id)">
							<view class="list_top">
								<view class="SN">
									<text>{{item.name}}</text>
								</view>
								<view class="copy">
									<view>
										<text class="copy_1" style="color: #228B22;">已激活(台):</text>
										<u--text :text="item.active" color="#228B22" bold size="13"></u--text>
									</view>
									<view>
										<text class="copy_1" style="color: #FF4500;">已绑定(台):</text>
										<u--text :text="item.bind" color="#FF4500" bold size="13"></u--text>
									</view>
									<view>
										<text class="copy_1" style="color: #555555;">共(台):</text>
										<u--text :text="item.total" color="#555555" bold size="13"></u--text>
									</view>
								</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
						</view>
						<view class="lists" v-for="(item,index) in data" :key="index" @click="info(item)">
							<view class="title">
								<text>{{item.name}}</text>
								<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
							</view>
							<view class="items">
								<view class="lefts">
									<u--image :src="item.images" width="80" height="80" shape="square"
										radius="8"></u--image>
								</view>
								<view class="rights">
									<view class="item">
										<text>总计：</text>
										<text>{{item.total}}</text>
									</view>
									<view class="item">
										<text>已激活：</text>
										<text>{{item.active}}</text>
									</view>
									<view class="item">
										<text>未激活：</text>
										<text>{{item.unactive}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty v-else mode="list" icon="/static/Empty/data_null.png" text="暂无终端">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				typeList: ['我的', '团队'],
				current: 0,
				data: [],
				type: 1,
			}
		},
		onLoad() {
			this._other()
		},
		methods: {
			// 页面数据展示
			async _other() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getEquipManage',
					data: {
						type: this.type
					},
				});
				if (res.code == 200) {
					this.data = res.data
					uni.hideLoading()
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: "none"
					});
					this.bottom = false
				}
			},
			info(item) {
				if (this.type == 1) {
					if (item.rate_edit == 2) {
						uni.navigateTo({
							url: '/pages/index/manage/terminal?id=' + item.product_id
						})
					} else {
						if (item.product_id == 10) {
							uni.navigateTo({
								url: '/pages/index/manage/terminalHyb?id=' + item.product_id
							})
						} else {
							uni.navigateTo({
								url: '/pages/index/manage/manage?id=' + item.product_id
							})
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/index/manage/team?id=' + item.product_id
					})
				}
			},
			sectionChange(index) {
				if (this.current != index) {
					this.current = index
					this.type = index + 1
					this._other()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F6FC;
	}

	.conent_box {
		// background-color: #f6f6f6;

		.conent {
			border-radius: 10rpx;

			.conent_text {
				display: block;
				width: 100%;
				background-color: #1296db;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					color: #fff;
					font-size: 24rpx;
				}

				.search {
					width: 65%;
					flex: none;
					font-size: 28rpx;
				}
			}

			.conent_cont {
				// background-color: #fff;
				padding: 30rpx;

				.conent_tit {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx 0;

					text {
						font-size: 28rpx;
						color: #333333;
						margin-right: 20rpx;
					}
				}

				h1 {
					text-align: center;
					font-weight: 500;
					font-size: 38rpx;
					margin-bottom: 30rpx;
				}


			}
		}
	}

	.screen_top {
		display: flex;
		justify-content: space-between;
		padding: 25rpx;
		font-size: 28rpx;
		color: #333;
	}

	.list_box {
		box-sizing: border-box;

		.list {
			margin-bottom: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding: 30rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 0 16px -14px #333;

			.list_top {
				display: flex;
				flex-direction: column;

				.SN {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 20rpx;


					text {
						padding-left: 25rpx;
						line-height: 40rpx;
						font-weight: bold;
						position: relative;
					}

					text::before {
						position: absolute;
						content: '';
						height: 80%;
						margin-top: 3%;
						width: 8rpx;
						background-color: #2f9fff;
						border-radius: 30rpx;
						left: 0;
					}
				}

				.copy {
					display: flex;
					align-items: center;
					font-size: 26rpx;

					view {
						display: flex;
						margin-right: 30rpx;
					}

					.copy_1 {
						margin-right: 16rpx;
					}
				}
			}

			.screen_list {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 30rpx;

				text {
					background-color: #f6f6f6;
					color: #333;
					font-size: 24rpx;
					padding: 15rpx;
					text-align: center;
					margin-right: 15rpx;
				}
			}

			.belong {
				padding: 20rpx 0 0 0;
				font-size: 28rpx;
				border-top: #f6f6f6 1px solid;
				display: block;
			}

		}

		.lists {
			margin-bottom: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding: 30rpx 20rpx;
			box-shadow: 0 0 16px -14px #333;

			.title {
				font-size: 32rpx;
				color: #333;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f4f4f5;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					padding-left: 25rpx;
					line-height: 40rpx;
					font-weight: bold;
					position: relative;
				}

				text::before {
					position: absolute;
					content: '';
					height: 80%;
					margin-top: 3%;
					width: 8rpx;
					background-color: #2f9fff;
					border-radius: 30rpx;
					left: 0;
				}
			}

			.items {
				display: flex;
				justify-content: space-between;
				padding-top: 30rpx;
				align-items: center;

				.lefts {
					width: 30%;
				}

				.rights {
					width: 69%;
					border-left: 1px solid #f4f4f5;
					padding-left: 30rpx;

					.item {
						font-size: 28rpx;
						padding: 6rpx 0;
						font-weight: bold;
					}

					.item:nth-child(1) {
						color: #1296db;
					}

					.item:nth-child(2) {
						color: #19be6b;
					}

					.item:nth-child(3) {
						color: #fa3534;
					}
				}
			}
		}
	}
</style>